<template>
  <!-- 登录表单容器 -->
  <div class="login_container">
    <!-- 登录区域 -->
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img id="avatar" src="../assets/img/timg.gif" alt="" />
      </div>
      <!-- 表单 -->
      <el-form
        :model="loginForm"
        status-icon
        :rules="loginRules"
        ref="loginForm"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button
            type="primary"
            @click="submitForm('loginForm')"
            :loading="loading"
            >登录</el-button
          >
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 验证码 -->
      <Vcode
        :show="isShow"
        @success="success"
        @close="close"
        :canvasWidth="500"
        :canvasHeight="350"
      />
    </div>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
import { login } from "../api/system/user";
export default {
  name: "Login",
  data() {
    return {
      isShow: false,
      loading: false,
      loginForm: {
        username: "admin",
        password: "123456",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          // 验证不通过 返回
          return;
        } else {
          // 验证通过
          // 显示验证框
          this.isShow = true;
        }
      });
    },
    resetForm(formName) {
      // 重置表单
      this.$refs[formName].resetFields();
    },
    // 验证成功 异步执行
    async success() {
      // 执行登录效果
      this.loading = true;
      console.log(111);
      // 发起登录请求
      login(this.loginForm).then((res) => {
        console.log(res);
        if (res.success) {
          // 返回成功
          // 路由到首页
          this.$message({
            title: "登入成功",
            message: "欢迎你进入系统",
            type: "success",
          });
          // 使用LocalStorage 存储 JWT TOKEN
          localStorage.setItem("token", res.data);
          this.$router.push("/main");
        } else {
          // 返回失败
          this.isShow = false;
          this.$message({
            title: "登入失败",
            message: res.data.errorMsg,
            type: "error",
          });
        }
      });
      // const { data: res } = await this.$http.post(
      //   "/system/user/login",
      //   this.loginForm
      // );
      this.loading = false;
    },
    close() {
      this.isShow = false;
    },
  },
  components: {
    Vcode,
  },
};
</script>

<style scoped>
.login_container {
  height: 100%;
  background-image: linear-gradient(45deg, rgb(77, 66, 121), rgb(67, 135, 155));
}

.login_box {
  width: 450px;
  height: 380px;
  background-color: #ffffff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* 移动 */
  transform: translate(-50%, -50%);
}
.avatar_box {
  width: 130px;
  height: 130px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  position: absolute;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 水平居中 */
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  left: 50%;
}
#avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eeeeee;
}
.login-form {
  position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 0 20px;
  /* 盒子里面 */
  box-sizing: border-box;
}
.login-btn {
  display: flex;
  justify-content: center;
}
</style>
